/*
 * @Author: xiehangyun 
 * @Date: 2025-05-10 18:19:41 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-09-15 18:26:46
 */

import { ArrowRight } from '@nutui/icons-react-taro';
import { Avatar, Button, Cell, Col, Grid, Row } from '@nutui/nutui-react-taro';
import { Image, Text, View } from '@tarojs/components';
import Taro, { useDidShow } from "@tarojs/taro";
import clsx from 'clsx';
import { autorun } from "mobx";
import { observer } from "mobx-react-lite";
import { ReactNode, useEffect, useRef, useState } from "react";
import PageLayer from 'src/components/PageLayer/PageLayer';
import smallLogoPNG from "src/static/UTlogo.svg";
import userInfoStore from 'src/subPages/UserInfo/userInfoStore';
import utils from 'src/utils/utils';
import Version from './Version/Version';
import closedPNG from './img/closed.png';
import payPNG from './img/pay.png';
import receivePNG from "./img/receive.png";
import sendPNG from './img/send.png';
import styles from "./user.module.less";
import userStore from './userStore';
import { values } from 'lodash';

interface Iprops {
    children?: ReactNode
}

// 用户页面
const User = observer((props: Iprops) => {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [activeCell, setActiveCell] = useState<string | null>(null);

    const handleTouchStart = (title: string) => {
        setActiveCell(title);
    };

    const handleTouchEnd = () => {
        setTimeout(() => setActiveCell(null), 150); // 停留 150ms
    };

    useEffect(() => autorun(() => {

    }, { delay: 30 }), []);

    useDidShow(() => {
        userInfoStore.getCurrentUser();
        userStore.getOrderStatusStatistics();
    });

    //
    const tabs: Array<{ icon: string, text: string, value: number, url: string }> = [
        {
            icon: payPNG,
            text: '待付款',
            value: userStore.waitPay,
            url: "/subPages/MyOrder/MyOrder?orderState=WAIT_PAY"
        },
        {
            icon: sendPNG,
            text: '待发货',
            value: userStore.waitDelivery,
            url: "/subPages/MyOrder/MyOrder?orderState=WAIT_DELIVERY"
        },
        {
            icon: receivePNG,
            text: '已发货',
            value: userStore.delivered,
            url: "/subPages/MyOrder/MyOrder?orderState=DELIVERED"
        },
        {
            icon: closedPNG,
            text: '已关闭',
            value: userStore.closed,
            url: "/subPages/MyOrder/MyOrder?orderState=CLOSED"
        },
    ];

    return (
        <PageLayer
            className={styles.user}
            title='我的'
        >
            <View className={styles.userinfo} >
                <Row>&nbsp;</Row>
                <Row>
                    <Col span="2"></Col>
                    <Col span="5">
                        <Avatar
                            className={styles.avatar}
                            size="large"
                            src={userInfoStore.profilePicture ? utils.ossSuffix(userInfoStore.profilePicture) : smallLogoPNG}
                        />
                    </Col>
                    <Col span="10">
                        <Row className={styles.nickname} >{userInfoStore.userName || "我的昵称"}</Row>
                        <Row
                            className={styles.userId}
                            onClick={() => {
                                Taro.setClipboardData({
                                    data: userInfoStore.id.toString(),
                                    success: () => {
                                        Taro.showToast({
                                            title: 'ID已复制',
                                            icon: 'success'
                                        });
                                    }
                                });
                            }}
                        >ID: {userInfoStore.id}</Row>
                        <Row
                            className={styles.phone}
                            onClick={() => {
                                Taro.navigateTo({
                                    url: "/subPages/UserInfo/UserInfo"
                                });
                            }}
                        >{"个人信息 >"}</Row>
                    </Col>

                    <Col span="7">
                        <Row>
                            <Text
                                className={styles.right_btn}
                                onClick={() => Taro.navigateTo({
                                    url: "/subPages/MyPromotion/MyPromotion"
                                })}
                            >我的推广</Text>
                        </Row>
                        <Row>
                            <Text
                                className={styles.right_btn}
                                onClick={() => Taro.navigateTo({
                                    url: "/subPages/MyWallet/MyWallet"
                                })}
                            >我的钱包</Text>
                        </Row>
                    </Col>
                </Row>
            </View>

            <Cell.Group>
                <Cell
                    // className={styles.title}
                    style={{
                        fontWeight: 'bold'
                    }}
                    title="我的订单"
                    align="center"
                    extra={
                        <>
                            <Text style={{ marginRight: '5px' }} >
                                查看全部
                            </Text>
                            <ArrowRight />
                        </>
                    }
                    onClick={() =>
                        Taro.navigateTo({
                            url: "/subPages/MyOrder/MyOrder?orderState="
                        })
                    }
                />

                {/* 
                <Grid columns={4} square>

                    <Grid.Item
                        text="待付款"
                        onClick={() =>
                            Taro.navigateTo({
                                url: "/subPages/MyOrder/MyOrder?orderState=WAIT_PAY"
                            })
                        }
                        className={styles.orderItem}
                    >
                        <>
                            <Image
                                src={payPNG}
                                style={{ width: '46rpx' }}
                                mode="aspectFit"
                            />
                            {userStore.waitPay > 0 && (
                                <View className={styles.orderBadge}>
                                    {userStore.waitPay}
                                </View>
                            )}
                        </>
                    </Grid.Item>
                    <Grid.Item
                        text="待发货"
                        onClick={() =>
                            Taro.navigateTo({
                                url: "/subPages/MyOrder/MyOrder?orderState=WAIT_DELIVERY"
                            })
                        }
                    >
                        <Image
                            style={{ width: '46rpx' }}
                            src={sendPNG}
                            mode="aspectFit"
                        />
                    </Grid.Item>
                    <Grid.Item
                        text="已发货"
                        onClick={() =>
                            Taro.navigateTo({
                                url: "/subPages/MyOrder/MyOrder?orderState=DELIVERED"
                            })
                        }
                    >
                        <Image
                            style={{ width: '46rpx' }}
                            src={receivePNG}
                            mode="aspectFit"
                        />
                    </Grid.Item>
                    <Grid.Item
                        text="已关闭"
                        onClick={() =>
                            Taro.navigateTo({
                                url: "/subPages/MyOrder/MyOrder?orderState=CLOSED"
                            })
                        }
                    >
                        <Image
                            style={{ width: '46rpx' }}
                            src={closedPNG}
                            mode="aspectFit"
                        />
                    </Grid.Item>
                </Grid> 
                */}

                <View className={styles.body} >
                    {tabs.map((tab, index) => {
                        return <View
                            key={index}
                            id={tab.text}
                            className={styles.tab_item}
                            onClick={() => {
                                Taro.navigateTo({
                                    url: tab.url
                                })
                            }}
                        >
                            <Image
                                mode="heightFix"
                                src={tab.icon}
                                className={styles.tab_icon}
                            />
                            {
                                tab.value > 0 &&
                                <Text className={styles.badge}>{tab.value}</Text>
                            }
                            <View className={styles.tab_text}>{tab.text}</View>
                        </View>
                    })}
                </View>

            </Cell.Group>

            <Cell.Group>
                {/* <Cell
                    className={styles.title}
                    title="我的工具"
                    align="center"
                /> */}
                {[
                    { title: "我的设计", url: "/subPages/MyDesign/MyDesign" },
                    { title: "我的收藏", url: "/subPages/MyCollection/MyCollection" },
                    // { title: "我的图库", url: "/subPages/MyImage/MyImage" },
                    { title: "地址管理", url: "/subPages/AddressManage/AddressManage" },
                    { title: "优惠券", url: "/subPages/MyCoupons/MyCoupons" },
                    // { title: "关于我们", url: "/subPages/AboutUs/AboutUs" },
                    // { title: "企业定制、品牌/IP商务合作", url: "/subPages/CustomerService/CustomerService" },
                    { title: "服务条款", url: "/subPages/Clause/Clause" },
                    // { title: "隐私协议", url: "/subPages/PrivacyPolicy/PrivacyPolicy" },
                ].map((item) => (
                    <Cell
                        key={item.title}
                        // className={`nutui-cell-clickable ${activeCell === item.title ? styles.active : ""}`}
                        className={clsx(styles.title, activeCell === item.title && styles.active)}
                        title={item.title}
                        align="center"
                        extra={<ArrowRight />}
                        // onTouchStart={() => handleTouchStart(item.title)}
                        // onTouchEnd={handleTouchEnd}
                        onClick={() => item.url && Taro.navigateTo({ url: item.url })}
                    />
                ))}

                <Cell
                    className={clsx(styles.title)}
                    title={"意见反馈"}
                    align="center"
                    extra={<ArrowRight />}
                    onClick={() => {
                        Taro.openEmbeddedMiniProgram({
                            appId: 'wxebadf544ddae62cb',
                            path: 'pages/webview/index?sid=22984430&hash=59d4&navigateBackMiniProgram=true',
                            allowFullScreen: false
                        });
                    }}
                />

                <Cell
                    className={clsx(styles.title, styles.contact)}
                    title={
                        <Button
                            className={styles.contact_btn}
                            fill="none"
                            openType='contact'
                            style={{
                                marginTop: '0px',
                                width: '100%',
                                padding: '0px',
                                textAlign: 'right'
                            }}
                        >
                            客服
                        </Button>
                    }
                    align="center"
                    extra={<ArrowRight />}
                />

                {
                    // !utils.isRelease && 
                    userInfoStore.userType === "coupon_admin" &&
                    <Cell
                        className={clsx(styles.title)}
                        title={"发券"}
                        align="center"
                        extra={<ArrowRight />}
                        onClick={() => Taro.navigateTo({
                            url: "/subPages/IssueCoupon/IssueCoupon"
                        })}
                    />
                }

                {/* <Cell
                    className={clsx(styles.title, styles.contact)}
                    title={
                        <Button
                            className={styles.contact_btn}
                            fill="none"
                            onClick={() => {
                                Taro.makePhoneCall({
                                    phoneNumber: '4009161866'
                                })
                            }}
                            style={{
                                marginTop: '0px',
                                width: '100%',
                                padding: '0px',
                                textAlign: 'right'
                            }}
                        >
                            400-916-1866
                        </Button>
                    }
                    align="center"
                    extra={<ArrowRight />}
                /> */}


                {/* {
                    !utils.isRelease &&
                    <Cell
                        className={clsx(styles.title)}
                        title={"调试工具页面"}
                        align="center"
                        extra={<ArrowRight />}
                        onClick={() => Taro.navigateTo({
                            url: "/subPages/DevTool/DevTool"
                        })}
                    />
                } */}

            </Cell.Group>

            {/* 版本号 */}
            <Version />

        </PageLayer>
    );

});

export default User;